<template>
<div class="head">
    <router-link tag="div" to="/home" class="header-abs" v-show="showAbs">
        <span class="fa fa-angle-left fa-2x "></span>
    </router-link>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
        <router-link to="/home">
             <div class="fa fa-angle-left fa-2x header-fixed-faleft"></div>
       </router-link>
        景点详情
    </div>
</div>

    
</template>

<script>
export default {
    name:'DetailHeader',
    data(){
        return{
            showAbs:true,
            opacityStyle:{
                opacity:0
            }

        }
    },
    methods: {
      handleScroll(){
          const top=document.documentElement.scrollTop
        //  console.log(document.documentElement.scrollTop)
        if(top>55){
            let opacity=top/140
            opacity =opacity >1 ? 1:opacity
           this.opacityStyle={
               opacity
           }
            this.showAbs=false
        }else{
            this.showAbs=true
        }        
      }  
    },
    mounted() {
   window.addEventListener('scroll', this.handleScroll)
  },

}
</script>

<style lang="stylus" scoped>

.header-abs{
    position: absolute;
    left: .2rem;
    top: .2rem;
    width: .7rem;
    height: .7rem;
    border-radius: .4rem;
    background:rgba(0, 0, 0, .4);
}
.fa-angle-left{
    color: white;
    position: relative;
    top: 0.03rem;
    left: 0.22rem;
}
.header-fixed{
    overflow hidden
    height .86rem
    line-height .86rem
    text-align center
    color #fff
    background: #00bcd4;
    font-size .32rem;
    position: fixed;
    top: 0rem;
    width: 100%;
    max-width: 480px;
    z-index 19    
}
.header-fixed-faleft{
    float: left;
    height: 0.86rem;
    line-height: 0.86rem;  
    position: relative;
    left: 0.2rem;
    color:#fff;
}
</style>
